<template>
  <div class="pane" @click.stop="handlerClick(data)">
    <!-- <el-form :model="form" v-show="data.checked" class="form">
      <el-form-item label="内边距" :label-width="formLabelWidth">
        <el-input v-model="form.padding" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="生成方向" :label-width="formLabelWidth">
        <el-select v-model="form.direction" placeholder="请选择生成方向">
          <el-option label="纵向" value="column"></el-option>
          <el-option label="横向" value="row"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="模块数量" :label-width="formLabelWidth">
        <el-input v-model.number="form.quantity" :min="1" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="visible = false">确 定</el-button>
      </el-form-item>
    </el-form> -->
    <Pane v-for="(item, index) in data.children" :key="index" :data="item" :style="[...item.style]" />
  </div>
</template>
<script>
export default {
  name: "pane",
  props: {
    data: {
      type: Object,
      default: () => { }
    },
    /**
     * 切割函数
     */
    cancelButton: {
      type: Object,
      default: () => {
        return {
          text: '取 消',
          class: ''
        }
      }
    },
  },
  inject: ['select'],
  data() {
    return {
      visible: true,
      form: {
        padding: '',
        direction: '',
        quantity: 1,
      },
      formLabelWidth: '80px'
    };
  },
  mounted() {

  },
  methods: {
    handlerClick(item) {
      console.log("Catalogue", item);
      this.select(item)
    },
  }
};
</script>
<style lang="scss" scoped>
.pane {
  display: flex;
  cursor: pointer;

  .form {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    align-items: center;
  }
}
</style>
